;;;
var online = [{
    title: '人教版语文第一节课程内容讲解',
    src: '../img1/online/banner1-1.png',
    cont: '人教版',
    time: 23,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'yuwen'
}, {
    title: '人教版数学第一节课程内容讲解',
    src: '../img1/online/banner1-2.png',
    cont: '人教版',
    time: 23,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'shuxue'
}, {
    title: '人教版英语第一节课程内容讲解',
    src: '../img1/online/banner1-3.png',
    cont: '人教版',
    time: 23,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'english'
}, {
    title: '人教版数学第一节课程内容讲解',
    src: '../img1/online/banner1-4.png',
    cont: '人教版',
    time: 22,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'shuxue'
}, {
    title: '人教版语文第一节课程内容讲解',
    src: '../img1/online/banner1-5.png',
    cont: '人教版',
    time: 33,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'yuwen'
}, {
    title: '人教版英语第一节课程内容讲解',
    src: '../img1/online/banner1-6.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'english'
}, {
    title: '人教版语文第一节课程内容讲解',
    src: '../img1/online/banner2-1.png',
    cont: '人教版',
    time: 33,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'yuwen'
}, {
    title: '人教版物理第一节课程内容讲解',
    src: '../img1/online/banner2-2.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'wuli'
}, {
    title: '人教版化学第一节课程内容讲解',
    src: '../img1/online/banner2-3.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: '化学'
}, {
    title: '人教版生物第一节课程内容讲解',
    src: '../img1/online/banner2-4.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'shengwu'
}, {
    title: '人教版物理第一节课程内容讲解',
    src: '../img1/online/banner2-5.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'wuli'
}, {
    title: '人教版化学第一节课程内容讲解',
    src: '../img1/online/banner2-6.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'huaxue'
}, {
    title: '人教版化学第一节课程内容讲解',
    src: '../img1/online/banner2-3.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: '化学'
}, {
    title: '人教版生物第一节课程内容讲解',
    src: '../img1/online/banner2-4.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'shengwu'
}, {
    title: '人教版化学第一节课程内容讲解',
    src: '../img1/online/banner2-3.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: '化学'
}, {
    title: '人教版生物第一节课程内容讲解',
    src: '../img1/online/banner2-4.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'shengwu'
}, {
    title: '人教版英语第一节课程内容讲解',
    src: '../img1/online/banner1-6.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'english'
}, {
    title: '人教版语文第一节课程内容讲解',
    src: '../img1/online/banner2-1.png',
    cont: '人教版',
    time: 33,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'yuwen'
}, {
    title: '人教版物理第一节课程内容讲解',
    src: '../img1/online/banner2-2.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'wuli'
}, {
    title: '人教版化学第一节课程内容讲解',
    src: '../img1/online/banner2-3.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: '化学'
}, {
    title: '人教版生物第一节课程内容讲解',
    src: '../img1/online/banner2-4.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'shengwu'
}, {
    title: '人教版物理第一节课程内容讲解',
    src: '../img1/online/banner2-5.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'wuli'
}, {
    title: '人教版英语第一节课程内容讲解',
    src: '../img1/online/banner1-6.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'english'
}, {
    title: '人教版语文第一节课程内容讲解',
    src: '../img1/online/banner2-1.png',
    cont: '人教版',
    time: 33,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'yuwen'
}, {
    title: '人教版物理第一节课程内容讲解',
    src: '../img1/online/banner2-2.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'wuli'
}, {
    title: '人教版化学第一节课程内容讲解',
    src: '../img1/online/banner2-3.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: '化学'
}, {
    title: '人教版生物第一节课程内容讲解',
    src: '../img1/online/banner2-4.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'shengwu'
}, {
    title: '人教版物理第一节课程内容讲解',
    src: '../img1/online/banner2-5.png',
    cont: '人教版',
    time: 44,
    isFree: true,
    num: 1100,
    city: 'bj',
    level: 1,
    subject: 'wuli'
}];

var guib =document.querySelector('.guib')
console.log(guib);
// 按钮
var btn =document.querySelectorAll('button')
console.log(btn[1]);
// var page =document.querySelector('.page')
// console.log(page);
// 页码
var pageCount =document.querySelector('.pageCount')
var span =pageCount.getElementsByTagName('span')
console.log(span[0]);

var wuli =document.querySelector('.wuli')
console.log(wuli);
var n = 0;//当前是第1页
var pageS = 7 //展示的数据的个数


//一进页面就展示数据
// 一个总数据，一个渲染的数据， 一页的数量
infoShow(online,online.slice(0,pageS),pageS)
    //先确定页数
    //展示分页
    var str = ""
    for(var i=0;i<Math.ceil(online.length/pageS);i++){
        str+="<span>"+(i+1)+"</span>"
    }
    
    pageCount.innerHTML = str
   
     //默认是第0个li添加class
     span[0].className = 'a'

//渲染页面
function infoShow(arrAll,showArr,pageS){
    guib.innerHTML=showArr.map(function(item){
        return `
        <li>
        <img src="${item.src}" alt="">
            <div class="guib0">
                <span>人教版</span>
                <span>${item.num}人正在学习</span>
            </div>
            <div class="guib1">
                <p class="guib1a">
                    <span> ${item.title}</span><br>
                    <span class="guibaa">  ${item.time}课时</span>
                </p>
                <a href="../views/Videodetails.html"><div>免费学习</div></a>
            </div>
        </li>
        `
    }).join("")

    //判断按钮是否应该禁用

    // 判断总页数是否是 1页
    if(Math.ceil(arrAll.length/pageS)==1){
        
        btn[0].disabled = true
        btn[1].disabled = true
        btn[0].style.color = "rgb(161, 157, 157)"
        btn[1].style.color = "rgb(161, 157, 157)"
    }else{
         if(n==0){
            btn[0].disabled = true
            btn[0].style.color = "rgb(161, 157, 157)"
        }else if(n==Math.ceil(arrAll.length/pageS)-1){
            btn[1].disabled = true
            btn[1].style.color = "rgb(161, 157, 157)"
        }else{
            btn[0].disabled = false
            btn[1].disabled = false
            btn[0].style.color = "#000000"
            btn[1].style.color = "#000000"
        }
    }
   
}


// 点击下一页
btn[1].onclick=function(){
    //更新分页
    n++
    //清楚所有class
    for(var i=0;i<span.length;i++){
        span[i].className = ''
    }
    //当前页码加上class
    span[n].className = 'a'
    //数据渲染
    infoShow(online,online.slice(n*pageS,(n*pageS)+pageS),pageS)
}


// 点击上一页
btn[0].onclick=function(){
    
    //更新分页
    n--
    //清楚所有class
    for(var i=0;i<span.length;i++){
        span[i].className = ''
    }
    //当前页码加上class
    span[n].className = 'a'
    //数据渲染
    infoShow(online,online.slice(n*pageS,(n*pageS)+pageS),pageS)
}



// 1、点击物理筛选出物理的数据 
// 2、重新计算页码 渲染分页
// 3、渲染页面

// 1、筛选


wuli.onclick=function(){
var wuliarr = online.filter(function(item){
    return item.subject=='wuli'
})
console.log(wuliarr);
var str = ""
    for(var i=0;i<Math.ceil(wuliarr.length/pageS);i++){
        str+="<span>"+(i+1)+"</span>"
    }
    pageCount.innerHTML = str
    
    span[0].className = 'a' //默认是第0个li添加class
    //       (物理的总数，一页渲染的内容，页码)
    infoShow(wuliarr,wuliarr,pageS)

}




console.log(localStorage.isLogin);
var he =document.querySelector('.he')
console.log(he);
var img =document.querySelector('.img')
console.log(img);//头像
var ls =document.querySelector('.hea3 p')
console.log(ls);//登录注册
var hea3a =document.querySelector('.hea3a')
console.log(hea3a);
if(localStorage.isLogin=="true"){ //登录了
    // img.src = localStorage.logo
    he.style.display='block'
    ls.style.display='none'
}else{
    //隐藏头像
    he.style.display = 'none'
    ls.style.display='inline-block'
}
// 显示列表
img.onmouseover=function(){
hea3a.style.display='block'
}
document.onclick=function(){
    hea3a.style.display='none'
    }


//退出登录
var tui = document.querySelectorAll('.hea3a li')
console.log(tui);
tui[tui.length-1].onclick=function(){
    localStorage.removeItem('isLogin')
     //隐藏头像
     he.style.display = 'none'
     ls.style.display='inline-block'
 }

